<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>无刷新添加删除input输入框-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="/css/font.css">
	<link rel="stylesheet" href="/css/weadmin.css">

	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	<style type="text/css">
		/* 新增删除图标的样式 */

		.layui-form-label {
			width: 100%;
			text-align: left;
		}

		.layui-form-label,
		.layui-form-item .layui-input-inline {
			margin-top: 10px;
		}

		.yf-input-del .layui-input-inline .layui-input {
			padding-right: 20px;
		}

		.yf-input-del .layui-input-inline i.layui-icon {
			position: absolute;
			right: 2px;
			top: 10px;
			color: #999999;
		}
	</style>

</head>

<body>
	<div class="weadmin-nav">
		<span class="layui-breadcrumb">
			<a href="javascript:;">首页</a>
			<a href="javascript:;">会员管理</a>
			<a href="javascript:;"><cite>输入框操作</cite></a>
		</span>
		<a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
			href="javascript:location.replace(location.href);" title="刷新">
			<i class="layui-icon layui-icon-refresh"></i>
		</a>
	</div>
	<div class="weadmin-body">
		<div class="weadmin-block">
			<button class="layui-btn" onclick="insertInput()"><i
					class="layui-icon layui-icon-add-circle"></i>新增1条教育背景</button>
			<span class="fr" style="line-height:40px">共有数据：<i class="numText">88</i> 条</span>
		</div>
		<div class="layui-form-item yf-input-del" id="edu_bg">
			<label class="layui-form-label">教育背景:</label>

			<div class="layui-input-inline" id="insertInput11">
				<input type="text" name="edu_bg[5]" value="" autocomplete="off" placeholder="请输入" lay-verify="required"
					class="layui-input">
				<i class="layui-icon layui-icon-close deleteEduBg"></i>
			</div>
			<div class="layui-input-inline" id="insertInput11">
				<input type="text" name="edu_bg[6]" value="" autocomplete="off" placeholder="点击删除图标删除该项输入"
					lay-verify="required" class="layui-input">
				<i class="layui-icon layui-icon-close deleteEduBg"></i>
			</div>
			<div class="layui-input-inline" id="insertInput11">
				<input type="text" name="edu_bg[9]" value="" autocomplete="off" placeholder="点击新增增加新的输入框"
					lay-verify="required" class="layui-input">
				<i class="layui-icon layui-icon-close deleteEduBg"></i>
			</div>
			<div class="layui-input-inline" id="insertInput11">
				<input type="text" name="edu_bg[10]" value="" autocomplete="off" placeholder="name生成判断不重复"
					lay-verify="required" class="layui-input">
				<i class="layui-icon layui-icon-close deleteEduBg"></i>
			</div>
			<div class="layui-input-inline" id="insertInput11">
				<input type="text" name="edu_bg[11]" value="" autocomplete="off" placeholder="避免随意删除新增后产生的name重复问题"
					lay-verify="required" class="layui-input">
				<i class="layui-icon layui-icon-close deleteEduBg"></i>
			</div>
		</div>

	</div>

	<script type="text/javascript" src="/plugs/layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use(['element', 'jquery'], function () {
			var element = layui.element,
				$ = layui.jquery;

			var key1 = $("#edu_bg").children(".layui-input-inline").length;
			var FieldCount1 = 0;
			$(function () {
				$(".numText").html(key1);
				console.log("Hello,input输入框随意增加删除，新增时生成的name自动判断是否存在，存在则跳过，避免随意删除新增后提交因为name重复输入值被覆盖。");
			});

			window.insertInput = function () {
				//检索已有的input包含的name值
				var arr1 = [];
				FieldCount1++;
				$("#edu_bg input[type='text']").each(function () {
					arr1.push($(this).attr('name'));

				});
				console.log(arr1);
				//alert(arr1);
				//所有name加入数组alert
				var div1 = $("<div></div>").addClass("layui-input-inline");
				//console.log(edu_bg[FieldCount1]);
				var newCount1 = "edu_bg[" + FieldCount1 + "]";
				//判断新生成的name值是否在已存在的数组中
				if ($.inArray(newCount1, arr1) === -1) {
					FieldCount1 = FieldCount1;
					var input1 = "<input type='text' name='edu_bg[" + FieldCount1 +
						"]' value='' autocomplete='off' placeholder='请输入' lay-verify='required' class='layui-input'>"
					var icon1 = "<i class='layui-icon deleteEduBg'>&#x1006;</i>";
					div1.append(input1, icon1);
					$("#edu_bg").append(div1); // 追加新元素
					key1++;
				} else {
					FieldCount1++;
					insertInput();
				}
				$(".numText").html(key1);

			}
			$("body").on("click", ".deleteEduBg", function (e) { //user click on remove text  
				if (key1 > 1) {
					$(this).parent('div').remove(); //remove text box  
					key1--; //decrement textbox  
				} else {
					alert("请至少填写1条教育背景信息！");
					return false;
				}
				$(".numText").html(key1);

			})

		});
	</script>

</body>

</html>